<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
富Marker示例</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="../../src/RichMarker/RichMarker.min.js"></script>
<style>
body{margin:0;padding:0}
</style>
</head>
<body>
<div style="width:700px;height:400px;border:1px solid gray;margin:10px 0 0 10px;" id="container">
</div>
<div>
    <textarea id="ta" style="width:700px;height:300px;border:1px solid gray;margin:10px 0 0 10px;"></textarea> <input type="button" value="clear" onclick="cr()" />
</div>
</body>
</html>
<script type="text/javascript">

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.309965, 40.058333), 17);
map.enableScrollWheelZoom();

var htm = "<div style='background:#E7F0F5;color:#0082CB;border:1px solid #333;width:145px;'>"
              +     "欢迎使用百度地图！"
              +     "<img src='http://map.baidu.com/img/logo-map.gif' border='0' />"
              + "</div>";
var point = new BMap.Point(116.30816, 40.056863);
var myRM= new BMapLib.RichMarker(htm, point,
															  {"anchor" : new BMap.Size(-72, -84),
															   "enableDragging" : true});

map.addOverlay(myRM);

var ta = document.getElementById("ta");

function setTA(str) {
	ta.value += str;
}

function cr() {
	ta.value = "";
}

myRM.addEventListener("onmousedown", function(e) {
	setTA("MouseDown : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onclick", function(e) {
	setTA("Click | ");
});
myRM.addEventListener("onmouseup", function(e) {
	setTA("MouseUp : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onmouseout", function(e) {
	setTA("MouseOut : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onmouseover", function(e) {
	setTA("MouseOver : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("ondragstart", function(e) {
	setTA("DragStart | ");
});
myRM.addEventListener("ondragging", function(e) {
	setTA("Dragging : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("ondragend", function(e) {
	setTA("DragEnd : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onremove", function(e) {
	setTA("remove |");
});

myRM.addEventListener("ondblclick", function(e) {
	setTA("RM dblclick |");
});

myRM.addEventListener("onclick", function(e) {
	setTA("RM click |");
});
myRM.addEventListener("ontouchend", function(e) {
	setTA("touchend |");
});
</script>

